<template>
  <el-container>
    <el-aside style="width: 220px">
      <h1 class="menuTitle">图表</h1>
      <el-menu
        default-active="1"
        class="el-menu-vertical-demo"
        @select="handleSelect"
        background-color="white"
      >
        <el-menu-item index="1">
          <i class="el-icon-user"></i>
          <span slot="title">年图表</span>
        </el-menu-item>
        <el-menu-item index="2">
          <i class="el-icon-menu"></i>
          <span slot="title">月图表</span>
        </el-menu-item>
        <!-- <el-menu-item index="3">
          <i class="el-icon-document"></i>
          <span slot="title">周图表</span>
        </el-menu-item> -->
      </el-menu>
    </el-aside>
    <el-main>
      <el-card class="box-card" v-if="activeIndex == 1">
        <div slot="header" class="clearfix">
          <span>年账单统计</span>
          <div class="yearSelect">
            <el-date-picker v-model="month" type="year" placeholder="选择月">
            </el-date-picker>
          </div>
        </div>
        <div class="chart-container">
          <chart
            height="95%"
            width="100%"
            :incomeList="incomeList"
            :expenditureList="expenditureList"
            :getData="getData"
            :monthYear="month"
          />
        </div>
      </el-card>
      <el-card class="box-card" v-if="activeIndex == 2">
        <div slot="header" class="clearfix">
          <span>月账单统计</span>
          <div class="yearSelect">
            <el-date-picker
              v-model="monthYear"
              type="month"
              placeholder="选择月"
            >
            </el-date-picker>
          </div>
        </div>
        <div class="chart-container">
          <monthChart
            :chartData="monthChartData"
            :getData="getData"
            :monthYear="monthYear"
          ></monthChart>
        </div>
      </el-card>
      <!-- <el-card class="box-card" v-if="activeIndex == 3">
        <div slot="header" class="clearfix">
          <span>周账单统计</span>
        </div>
        <div class="chart-container">
          <weekChart />
        </div>
      </el-card> -->
    </el-main>
  </el-container>
</template>

<script>
import Chart from "@/components/Charts/MixChart";
// import WeekChart from "@/components/Charts/WeekChart";
import MonthChart from "@/components/Charts/MonthChart";
import { listBillForMonth, listMonthFinance } from "@/api/bill";
export default {
  name: "MixChart",
  components: { Chart, MonthChart },
  data() {
    return {
      month: this.dayjs().startOf("year").format("YYYY"),
      monthYear: this.dayjs().startOf("month").format("YYYY-MM"),
      incomeList: [],
      expenditureList: [],
      activeIndex: 1,
      monthChartData: [],
    };
  },
  mounted() {},
  methods: {
    getData() {
      const incomeParam = {
        userName: this.$store.getters.name,
        teamName: this.$store.getters.teamName,
        year: this.dayjs(this.month).format("YYYY"),
        isIncome: 1,
      };
      listBillForMonth(incomeParam).then((res) => {
        if (res.code == 0) {
          this.incomeList = res.data;
        }
      });
      incomeParam.isIncome = 0;
      listBillForMonth(incomeParam).then((res) => {
        if (res.code == 0) {
          this.expenditureList = res.data;
        }
      });
      const monthDetailParam = {
        userName: this.$store.getters.name,
        teamName: this.$store.getters.teamName,
        monthYear: this.dayjs(this.monthYear).format("YYYY-MM"),
      };
      listMonthFinance(monthDetailParam).then((res) => {
        if (res.code == 0) {
          this.monthChartData = res.data;
        }
      });
    },
    handleSelect(key) {
      this.activeIndex = key;
    },
  },
};
</script>

<style scoped>
.chart-container {
  position: relative;
  width: 100%;
  height: calc(100vh - 84px);
}
.yearSelect {
  height: 8%;
  width: 20%;
  background-color: white;
  float: right;
}
.el-aside {
  background-color: white;
  color: #333;
  height: 93vh;
  padding: 0;
  width: 10%;
}

.el-main {
  background-color: white;
  color: #333;
  /* text-align: center; */
  height: 100vh;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
.menuTitle {
  margin-left: 20px;
  margin-top: 20px;
  font-size: 20px;
}
.el-card {
  height: 100%;
}
</style>

